<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: green;
    }
    table{
      width: 800px;
      margin: 40px auto;
      border-collapse: collapse;
    }
    caption{
      color: white;
      font-size: 30px;
      font-weight: bold;
    }
    th{
      border: 1px solid #ccc;
      font-size: 20px;
      color:rgb(251, 255, 0);
     
    }
    tr:nth-child(2){
      background-color:darkmagenta;
    }
    tr{
      background-color: white;
    }
    td{
      border: 1px solid #ccc;
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  
  <script>
    	var heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作'];
      var datas = [
            {name:'欧阳霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'上海'},
            {name:'令狐霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'诸葛霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'南京'},
            {name:'西门霸天',age:19,gender:'男',stuId:'1001',salary:'20000',city:'深圳'},
            {name:'鸠摩智',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'段延庆',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'段正淳',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'容子矩',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'崔绿华',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'梅超风',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'鲁有脚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'焦木和尚',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'韩小莹',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'侯通海',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'欧阳克',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'欧阳峰',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'玄真道人',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'司徒伯雷',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'陈近南',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'张康年',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'吴大鹏',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'西奥图三世',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'任盈盈',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'林远图',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'郑镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'张金鏊',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'陈歪嘴',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'洪人雄',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'余人彦',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'劳德诺',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'玉钟子',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'史镖头',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'},
            {name:'东方不败',age:19,gender:'男',stuId:'1001',salary:'20000',city:'北京'}
          ];    

    var body = document.querySelector('body');
    var table = document.createElement('table');
    var caption = document.createElement('caption')
    caption.innerHTML = '就业榜'
    table.appendChild(caption)
    var tr = document.createElement('tr');
    table.appendChild(tr);
    for(var i = 0; i < heads.length; i++){
      var th = document.createElement('th');
      th.innerText = heads[i];
      tr.appendChild(th);
    }
    //创建主体表格
    for(var i = 0; i < datas.length; i++){
      var tr = document.createElement('tr');
      for(key in datas[i]){
        var td = document.createElement('td');
        td.innerText = datas[i][key];
        tr.appendChild(td);
      }
      //创建最后一个td
      var last_td = document.createElement('td');
      last_td.innerHTML = '<a href="javascript:;">删除</a>';
      tr.appendChild(last_td);
      table.appendChild(tr);
      //点击最后一个td 删除整行tr(方法二)
      console.log(last_td);
      last_td.onclick = function(){
        table.removeChild(this.parentNode)
      }
    }
    body.appendChild(table);
    //点击删除按钮a标签 删除整个行 或 也可以点击最后一个td也就是last_td进行删除整行(2个方法都行)
    //点击标签a进行删除(方法一)
    var a_del = document.querySelectorAll('a');
    for(var i = 0; i < a_del.length; i++){
      a_del[i].onclick = function(){
        table.removeChild(this.parentNode.parentNode);
      }
    }
  </script>
</body>
</html>